<template>
    <div class='good-list' >
        <!-- 标签跳转 -->
        <!-- <router-link class='goods-item' v-for='item in allgoods' :key='item.id' :to="'/home/goodinfo/'+item.id">
             <img :src="item.img_url" alt="" tag="div">           
            <h1>{{item.desc}}</h1>          
            <div class='price_bottom'>
                <div class="price">
               ￥<span> {{item.price}}</span> <b>价格：</b><del>{{item.oldprice}}</del>
                </div>
                <aside>
                    <b>快递: {{item.post}}</b>
                    <b>月销量 {{item.sellNum}}件</b>
                </aside>
            </div>
        </router-link> -->

        <!-- 在网页中跳转有两种方式 -->
        <!-- 1.方式1：使用a 标签的形式叫做标签跳转 -->
        <!-- 2. 方式 2： 使用window.location.href 的形式叫做编程式导航 -->

        <!-- 编程式导航 -->
        <div class='goods-item' v-for='item in allgoods' :key='item.id' @click="goDetail(item.id)" >
             <img :src="item.img_url" alt="">           
            <h1>{{item.desc}}</h1>          
            <div class='price_bottom'>
                <div class="price">
                    
               ￥<span> {{item.price}}</span>  <br><b>价格：</b><del>{{item.oldprice}}</del>
                </div>
                <aside>
                    <b>快递: {{item.post}}</b>
                   
                    <b>月销量 {{item.sellNum}}件</b>
                </aside>
            </div>
        </div>

          <mt-button type='danger' size='large'>加载更多</mt-button>
    </div>

</template>
<script>
export default {
    data () {
        return {
            allgoods:[]  //获取所有数据
        }
    },
    created () {
        this.getallgoods();
    },
    methods: {
        getallgoods(){
            this.$http.get('http://localhost:1000/mobileGoods').then(res=>{
                this.allgoods=res.body;
            })
        },
        // 使用js的方式进行路由跳转
        goDetail(id){
            // 字符串
                // this.$router.push('/home/goodinfo/'+id)
            // 对象
            // this.$router.push({path:"/home/goodinfo/"+id})
            // 命名路由
            this.$router.push({name:"goodinfo",params:{id}})


        }
        
    },

}
</script>

<style lang="scss" scoped>

    .good-list{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 5px 10px;
        justify-content: space-between;
    }
    .goods-item{
        box-shadow: 0 0 5px #ccc;
        padding: 2px;
        margin-bottom: 10px;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .price_bottom{
        padding: 5px 2px;
        background: #ccc;
    }
    .goods-item{
        width: 48%;
        img{
            width: 100%;
        }
        .price{
            color: #FF0036;
            font-size: 14px;
            span{
                font-size: 17px;
                font-weight: bold;
            }
            b{
                font-weight: normal;
                color: #888;
                font-size: 12px;
            }
            del{
                font-size: 12px;
                color: #888;
            }
        }
        h1{
            font-size: 12px;
        }
        aside{
            display: flex;
            font-size: 10px;
            color: #888;
            justify-content: space-around;
            font-weight: normal!important;
        }
    }
</style>

